Blob对象
一个 Blob对象表示一个不可变的, 原始数据的类似文件对象。Blob表示的数据不一定是一个JavaScript原生格式。
File 接口基于Blob，继承 blob功能并将其扩展为支持用户系统上的文件。
Blob构造函数
1 | var blob = new Blob(data[, options])) |
返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
Blob构造函数接受两个参数：
参数data是一组数据，所以必须是数组，即使只有一个字符串也必须用数组装起来.
参数options是对这一Blob对象的配置属性，目前也只有一个type也就是相关的MIME需要设置 type的值： ‘text/csv,charset=UTF-8’ 设置为csv格式，并设置编码为UTF-8，’text/html’ 设置成html格式。
1 | var blob = new Blob(['啦啦啦啦,我是Blob'],{type: 'text/html'}); |
URL.createObjectURL()
URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。
这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。
1 | objectURL = URL.createObjectURL(blob); |
使用URL.createObjectURL()函数可以创建一个Blob URL，参数blob是用来创建URL的File对象或者Blob对象，返回值格式是：blob://URL。
URL.revokeObjectURL()
URL.revokeObjectURL() 静态方法用来释放一个之前通过调用 URL.createObjectURL() 创建的已经存在的 URL 对象。当你结束使用某个 URL 对象时，应该通过调用这个方法来让浏览器知道不再需要保持这个文件的引用了。
Blob的使用
使用Blob最简单的方法就是创建一个URL来指向Blob
1 | <a download="data.txt" id="BlobEle">下载</a> |
Blob 响应
1 | // blob 图片 |
前端图片canvas，file，blob，DataURL等格式转换
利用URL.createObjectURL()
1 |
|
利用FileReader.readAsDataURL()
1 |
|
canvas转为blob对象 canvas生成的图片，如何上传到七牛云或服务器？
答案是将canvas输出为Blob对象，这样就可以像File对象一样操作它了1
2
3
4 canvas.toBlob(function (name, quality=0.8) {
console.log(blobObj)
let url = URL.createObjectURL(blob); // 转化 dataurl 地址
})
获取到的图片是Blob格式的，如何显示在html中？
答案还是将Blob对象转换为DataUrl的形式。1
2
3
4canvas.toBlob(function (blobObj) {
let imgSrc = window.URL.createObjectURL(blobObj)
document.getElementById('img').src = imgSrc
})
blob dataUrl 格式 转为 base 64
创建 img 对象 通过 canvas 操作
1 | let img = new Image(); |
canvas图片压缩
1 |
|
